<template>
    <div class="minW1060-auto bg-fff mt10">
        <div class="pad20 ml10">
            <!--搜索条件-->
            <el-row>
                <el-col :span="13">

                    <div class="dlblock-mb20 ml10">
                        <span class="pr5">部门</span>
                        <el-select v-model="param.deptId" style="width: 150px" clearable>
                            <!--                            <el-option :label="item.name" v-for="item in dutuies" :value="item.name"></el-option>-->
                            <el-option v-for="(item, index) in departments" :key="index" :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="dlblock-mb20 ml10">
                        <span class="pr5">职务</span>
                        <el-select v-model="param.dutieId" style="width: 150px" clearable>
                            <el-option v-for="(item, index) in dutuies" :key="index" :label="item.name"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="dlblock-mb20">
                        <span class="pr5 ml10">姓名</span>
                        <el-input v-model.trim="param.name" class="input-text" size="medium"
                                  @keydown.enter.native="getPersonsFn"
                                  placeholder="请输入姓名" style="width: 150px;"
                                  :maxlength="10"
                                  show-word-limit clearable>
                        </el-input>
                    </div>
                    <div class="dlblock-mb20 pr5 pl5">
                        <el-button
                                @click="param.page = 1,getPersonsFn()"
                                class="el-icon-search ml5"
                                circle
                        ></el-button>
                    </div>
                </el-col>
                <el-col :span="11" align="right">
                    <div class="grid-content bg-purple-light">
                        <div class="dlblock-mb20 pr10 ml20">
                            <router-link :to="{path:'person/edit',query:{menuName:'添加人员'}}">
                                <el-button type="primary">添加</el-button>
                            </router-link>
                        </div>
                        <div class="dlblock-mb20 pr10">
                            <el-button type="danger" @click="delPersonsFn">删除</el-button>
                        </div>
                        <div class="dlblock-mb20 pr10">
                            <el-button type="primary" @click="downloadBtn()">下载模板</el-button>
                        </div>
                        <div class="dlblock-mb20 pr10">
                            <el-upload
                                    class="text-right"
                                    name="file"
                                    ref="upload"
                                    :action="config.baseURL + '/api/web/emp/import/person'"
                                    :on-preview="handlePreview"
                                    :on-remove="handleRemove"
                                    :auto-upload="false">
                                <el-button slot="trigger" size="medium" type="primary">模板导入</el-button>
                                <el-button style="margin-left: 10px;" size="medium" type="success" @click="submitUpload">确定导入</el-button>
                            </el-upload>
                        </div>
                        <div class="dlblock-mb20 pr10">
                            <el-button @click="dialogExportVisible = true">导出列表</el-button>
                        </div>


                        <!--弹出的设备对话框-->
                        <el-dialog :visible.sync="dialogExportVisible" @open="getPersonsFn" width="22%">

                            <el-row>
                                <el-col>
                                    <div class="dlblock-mb20">
                                        <span class="pr5">起始页</span>
                                        <el-input v-model.number="exportDeviceVal.fromPage" size="medium"
                                                  style="width: 80px;"
                                                  :maxlength="10" clearable></el-input>
                                    </div>

                                    <div class="dlblock-mb20">
                                        <span class="pr5 ml10">终止页</span>
                                        <el-input v-model.number="exportDeviceVal.toPage" size="medium"
                                                  style="width: 80px;"
                                                  :maxlength="10" clearable></el-input>
                                    </div>

                                    <div class="dlblock-mb20 pr10 ml20">
                                        <el-button type="primary" @click="exportPerson">导出</el-button>
                                    </div>

                                </el-col>
                            </el-row>

                        </el-dialog>


                    </div>
                </el-col>
            </el-row>
            <!--表格-->
            <el-row>
                <el-table class="my-table"
                          :data="personList" stripe
                          v-loading="loading"
                          :header-row-class-name="'my-table-header'"
                          @selection-change="handleSelectionChange"
                          ref="myTable"
                          border>
                    <el-table-column type="selection" align="center" fixed width="80">
                        <template slot-scope="{row}">
                            <label role="checkbox" class="el-checkbox is-checked">
                                <span aria-checked="mixed" class="el-checkbox__input mydeal">
                                    <span class="el-checkbox__inner" @click="checkMethod($event,row.index)"></span>
                                    <span class="checkbox" v-text="row.index"></span>
                                    <input type="checkbox" aria-hidden="true" class="el-checkbox__original" value="">
                                </span>
                            </label>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="name" label="姓名"></el-table-column>
                    <el-table-column align="center" prop="cardNo" label="员工工号"></el-table-column>
                    <el-table-column align="center" prop="gender" label="性 别">
                        <template slot-scope="{row}">
                            <p>{{row.gender !=null?row.gender==1?"男":row.gender==2?"女":"未设置":""}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="deptName" label="部 门"></el-table-column>
                    <el-table-column align="center" prop="phone" label="手机号" width="150"></el-table-column>
                    <el-table-column align="center" prop="idcard" label="身份证号" width="180"></el-table-column>
                    <el-table-column align="center" prop="nativeName" label="籍 贯"></el-table-column>
                    <el-table-column align="center" prop="region" label="民 族"></el-table-column>
                    <el-table-column align="center" prop="eduName" label="学 历"></el-table-column>
                    <el-table-column align="center" prop="marrStatus" label="婚 姻"></el-table-column>
                    <el-table-column align="center" prop="dateOfWork" label="从业日期">
                        <template slot-scope="{row}">
                            <p>{{row.dateOfWork!=null?new Date().getFullYear()
                                -parseInt(row.dateOfWork.slice(0,4)):0}}年</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="dateOfBirth" label="出生日期" width="150">
                        <template slot-scope="{row}">
                            <p>{{row.dateOfBirth!=null?row.dateOfBirth.slice(0,10):"未设置"}}
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="address" label="通讯地址" width="150">
                    </el-table-column>
                    <el-table-column align="center" label="操作" fixed="right" width="150">
                        <template slot-scope="{row}">
                            <p>
                            <router-link :to="{path:'person/edit', query:{person:row,menuName:'编辑人员'}}">
                                <el-button  type="text">编辑</el-button>
                            </router-link>&nbsp;
                            <el-button type="text" style="color: #f56c6c" @click="delPersonFn(row.id)">删除</el-button>
                            </p>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <!--分页控件-->
            <el-row :gutter="20" class="mt10">
                <el-col :span="12" :offset="6" align="center">
                    <el-pagination background layout="total, prev, pager, next" :total="param.total"
                                   :page-size="param.size"
                                   :current-page="param.page" @current-change="pageChange">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>

    import {
        delPerson,
        exportPersonInfo,
        getDepartments,
        getDutuies,
        getNativePlaces,
        getPerson,
        getPersons
    } from "@/api/"
    import {downloadToTagByA} from '@/utils/config'
    import config from '@/utils/config';
    export default {
        name: 'Person',
        components: {},
        data() {
            return {
                config,
                /* 导出*/
                //导出对话框
                dialogExportVisible: false,

                //人员导出参数
                exportDeviceVal: {
                    fromPage: 1,
                    toPage: 1,
                    size: 18,
                },

                watch: {
                    'exportDeviceVal.fromPage': function (value) {
                        let reg = /^[+]{0,1}(\d+)$/g;
                        if (!reg.test(value)) {
                            this.exportDeviceVal.fromPage = ''
                        }
                    },
                    'exportDeviceVal.toPage': function (value) {
                        let reg = /^[+]{0,1}(\d+)$/g;
                        if (!reg.test(value)) {
                            this.exportDeviceVal.toPage = ''
                        }
                    }
                },


                deptList: [

                    {
                        "deptId": 0,
                        "deptName": "全部部门"
                    },
                    {
                        "deptId": 77,
                        "deptName": "销售部"
                    },
                    {
                        "deptId": 78,
                        "deptName": "财务部"
                    },
                    {
                        "deptId": 70,
                        "deptName": "研发部"
                    },
                ],
                dutytList: [

                    {
                        "dutieId": 0,
                        "dutieName": "全部职务"
                    },
                    {
                        "dutieId": 3,
                        "dutieName": "驾驶员"
                    },
                    {
                        "dutieId": 4,
                        "dutieName": "调度员"
                    },
                    {
                        "dutieId": 5,
                        "dutieName": "安全员"
                    },
                ],
                line: '',
                name: '',
                loading: '',
                personList: [],
                fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                param: {
                    deptId: '',
                    dutieId: '',
                    name: '',
                    total: 0,
                    size: 18,
                    page: 1
                },
                nativePlaces: [],
                departments: [],
                dutuies: [],
                person: {},
                personIds: [],
                checkVal: [],
            }
        },
        methods: {
            //导出车辆模板
            downloadBtn() {
                downloadToTagByA("/api/web/emp/export/template", {
                    time: this.date,
                })
            },
            handlePreview(file) {
                console.log(file);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            submitUpload() {
                this.$refs.upload.submit();
                this.$refs.upload.clearFiles();
            },


            //导出
            exportPerson() {
                exportPersonInfo({
                        deptId: this.param.deptId,
                        dutieId: this.param.dutieId,
                        name: this.param.name,
                        size: this.param.size,
                        fromPage: this.exportDeviceVal.fromPage,
                        toPage: this.exportDeviceVal.toPage,
                    }
                )
            },

            dataYear(row, column) {
                const daterc = row[column.property];
                if (daterc != null) {
                    var time = daterc;
                    const timeFormat = time.slice(0, 10);
                    return timeFormat;
                }
            },
            dateHour(row, column) {
                const daterc = row[column.property];
                if (daterc != null) {
                    var time = daterc;
                    const timeFormat = time.slice(11, 19);
                    return timeFormat;
                }
            },
            checkMethod(event, index) {
                let e = event.target
                if (e.parentElement.classList.contains("is-checked")) {
                    e.parentElement.classList.remove("is-checked")
                    this.personIds.splice(index - 1, 1)
                } else {
                    e.parentElement.classList.add("is-checked")
                    this.personIds[index - 1] = this.personList[index - 1].id
                }
                let checkeds = document.querySelectorAll(".mydeal");
                let b = 0
                checkeds.forEach(item => {
                    if (item.classList.contains("is-checked")) {
                        b = b + 1;
                    }
                })
                let els = document.querySelectorAll(".el-table-column--selection");
                if (b == this.personList.length || b - 8 == this.personList.length) { //全选
                    this.checkSwitch(els[5].querySelector(".el-checkbox__inner"))
                } else if (b < this.personList.length || b - 8 < this.personList.length) {
                    this.checkRemove(els[5].querySelector(".el-checkbox__inner"))
                }
            },
            getUrl(image1) {
                if (image1 != '' && image1 != null) {
                    return window.gConfig.baseURL + image1
                } else {
                    return require('../../../assets/imgs/user_default.png')
                }

            },
            handleSelectionChange(val) {
                this.personIds = val.map(item => item.id)
                var els = document.querySelectorAll(".el-table-column--selection");
                let hasChecked = els[5].querySelector(".el-checkbox__inner").parentElement.classList.contains("is-checked")
                if (hasChecked) {
                    document.querySelectorAll(".el-checkbox__inner").forEach(el => {
                        this.checkRemove(el)
                    })
                } else {
                    document.querySelectorAll(".el-checkbox__inner").forEach(el => {
                        this.checkAdd(el)
                    })
                }
            },

            pageChange(val) {
                this.param.page = val;
                this.getPersonsFn();
            },

            getLicense(license) {
                if (license != null) {
                    switch (license) {
                        case 1:
                            return "A1 驾照";
                        case 2:
                            return "A2 驾照";
                        case 4:
                            return "A3 驾照";
                        case 8:
                            return "B1 驾照";
                        case 10:
                            return "B2 驾照";
                        case 20:
                            return "C1 驾照";
                        default:
                            return "未知 驾照"
                    }
                }
                return "未收录"
            },
            getPersonFn(id) {
                getPerson(id).then(res => {
                    if (res != null && res.code == 200) {
                        this.person = res.data
                    }
                })
            },
            delPersonFn(id) {
                delPerson(id).then(res => {
                    if (res != null && res.code == 200) {
                        this.$message.success("删除成功")
                        this.getPersonsFn()
                    } else {
                        this.$message.success(res.msg)
                    }
                })
            },
            delPersonsFn() {
                if (this.personIds.length != 0) {
                    this.loading = true
                    try {
                        this.personIds.forEach(id => {
                            delPerson(id)
                        })
                        this.$message.success('删除成功')
                    } catch (e) {
                        console.log(e)
                    } finally {
                        this.loading = false
                        this.getPersonsFn()
                    }

                }
            },
            getPersonsFn() {
                // this.loading = true
                getPersons(this.param).then(res => {
                    if (res != null && res.code == 200) {
                        this.personList = res.data.list
                        this.param.total = res.data.count
                    }
                    console.log(res.data)
                }).finally(() => {
                    this.loading = false
                })
            },
            getDutuiesFn() {
                getDutuies().then(res => {
                    if (res != null && res.code == 200) {
                        this.dutuies = res.data;
                    }
                })

            },
            getDepartmentsFn() {
                getDepartments().then(res => {
                    if (res != null && res.code == 200) {
                        this.departments = res.data;
                    }
                })
            },
            getNativePlacesFn() {
                getNativePlaces().then(res => {
                    if (res != null && res.code == 200) {
                        this.nativePlaces = res.data;
                    }
                })

            },
            indexMethod(index) {
                return index + (this.param.page - 1) * 4 + 1;
            },
            checkSwitch(e) {
                if (e.parentElement.classList.contains("is-checked")) {
                    e.parentElement.classList.remove("is-checked")
                } else {
                    e.parentElement.classList.add("is-checked")
                }
            },
            checkAdd(e) {
                e.parentElement.classList.add("is-checked")
            },
            checkRemove(e) {
                e.parentElement.classList.remove("is-checked")
            },
        },
        created() {
            this.getDutuiesFn()
            this.getDepartmentsFn()
            this.getNativePlacesFn()
            this.getPersonsFn()

        },
        mounted() {
        },

    }
</script>

<style scoped>
    /*内容左对齐*/
    /*.el-table__body-wrapper {
        text-align-last: left;
    }*/
    /*.input-text > input {*/
    /*    text-align: center;*/
    /*}*/
    span.checkbox {
        position: relative;
        left: 5px;
        top: -1px;
    }
    .my-table /deep/ tr, .my-table /deep/ td{
        padding: 0 !important;
        height: 30px;
        line-height: 30px;
    }
</style>
